import { Link, useNavigate } from "react-router-dom";
import { Card, Breadcrumb, Form, Button, Radio, DatePicker, Select, Table, Tag, Space, Popconfirm, message } from "antd";
import { EditOutlined, DeleteOutlined } from "@ant-design/icons";
// 中文语言汉化包 时间选择器显示中文
import locale from "antd/es/date-picker/locale/zh_CN";
import { render } from "@testing-library/react";
import { useChannel } from "@/hooks/useChannel";
import img404 from "@/assets/error.png";
import { useEffect, useState } from "react";
import { delArticleAPI, getArticleListAPI } from "@/apis/article";


const { Option } = Select
const { RangePicker } = DatePicker

const Article = () => {
    // 路由跳转方法
    const navigate = useNavigate()
    // 获取频道列表数据
    const { channelList } = useChannel()

    // 准备列数据
    const columns = [
        {
            title: '封面',
            dataIndex: 'cover',
            width: 120,
            render: cover => {
                return <img src={cover.images[0] || img404} width={50} height={50} alt="" />
            }
        },
        {
            title: '标题',
            dataIndex: 'title',
            width: 220
        },
        {
            title: '状态',
            dataIndex: 'status',
            // render是antd提供用于二次处理的函数
            // 这里的data是数据status的值  1-待审核  2-审核通过
            render: data => data === 1 ? <Tag color="warning">待审核</Tag> : <Tag color="success">审核通过</Tag>
        },
        {
            title: '发布时间',
            dataIndex: 'pubdate'
        },
        {
            title: '阅读数',
            dataIndex: 'read_count'
        },
        {
            title: '评论数',
            dataIndex: 'comment_count'
        },
        {
            title: '点赞数',
            dataIndex: 'like_count'
        },
        {
            title: '操作',
            render: data => {
                return (
                    <Space size="middle">
                        {/* 编辑按钮 */}
                        <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => navigate(`/publish?id=${data.id}`)} />
                        <Popconfirm
                            title="删除"
                            description="确定删除当前文章么？"
                            okText="确定"
                            cancelText="取消"
                            onConfirm={() => onConfirm(data)}
                        >
                            <Button type="primary" danger shape="circle" icon={<DeleteOutlined />} />
                        </Popconfirm>
                    </Space>
                )
            }
        }
    ]
    // 准备表格body数据
    // const data = [
    //     {
    //         id: '8218',
    //         comment_count: 0,
    //         cover: {
    //             images: []
    //         },
    //         like_count: 0,
    //         pubdate: '2019-03-11 09:00:00',
    //         read_count: 2,
    //         status: 2,
    //         title: '离线解决方案'
    //     }
    // ]



    // 请求参数
    const [reqData, setReqData] = useState({
        status: '',
        channel_id: '',
        begin_pubdate: '',
        end_pubdate: '',
        page: 1,
        per_page: 3
    })
    

    // 获取文章列表
    const [list, setList] = useState([])
    // 这是列表总数
    const [count, setCount] = useState(0)
    useEffect(() => {
        const getList = async () => {
            const res = await getArticleListAPI(reqData)
            setList(res.data.results)
            setCount(res.data.total_count)
        }
        getList()
    }, [reqData])
    // useEffect方法，依赖性[reqData]里面的数据如果改变，getList方法也会执行，所以，改变条件的时候，会重新请求数据

    const onFinish = (formValue) => {
        // 修改对象，先展开，在合并覆盖
        setReqData({
            ...reqData,
            status: formValue.status,
            channel_id: formValue.channel_id,
            begin_pubdate: formValue.date[0].format('YYYY-MM-DD'),
            end_pubdate: formValue.date[1].format('YYYY-MM-DD')
        })
    }

    // 分页方法 点击第几页 点击每页显示多少条数据 (两个参数分别对应)
    const onPageChange = (page, pageSize) => {
        // console.log(page, pageSize);
        // 修改参数依赖项，引发数据的重新获取列表渲染
        setReqData({
            ...reqData,
            page: page,
            per_page: pageSize
        })
    }

    // 确定删除当前文章
    const onConfirm = async (data) => {
        const res = await delArticleAPI(data.id)
        // console.log(res);
        if (res.message == 'OK') {
            message.success("删除成功")
            // 更新列表
            setReqData({
                ...reqData
            })
        }
    }

    return (
        <div>
            <Card
                title={
                    <Breadcrumb items={[
                        { title: <Link to={'/'}>首页</Link> },
                        { title: '文章列表' }
                    ]} />
                }
                style={{ marginBottom: 20 }}
            >
                <Form initialValues={{ status: null }} onFinish={onFinish}>
                    <Form.Item label="状态" name="status">
                        <Radio.Group>
                            <Radio value={2}>全部</Radio>
                            <Radio value={0}>草稿</Radio>
                            <Radio value={2}>审核通过</Radio>
                        </Radio.Group>
                    </Form.Item>
                    <Form.Item label="频道" name="channel_id">
                        <Select style={{ width: 288 }} placeholder="请选择文章频道" >
                            {/* 选中项是value的值 */}
                            {channelList.map(item => <Option key={item.id} value={item.id}>{item.name}</Option>)}
                        </Select>
                    </Form.Item>
                    <Form.Item label="日期" name="date">
                        {/* 传入locale属性 控制中文显示 */}
                        <RangePicker locale={locale}></RangePicker>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">筛选</Button>
                    </Form.Item>
                </Form>
            </Card>

            {/* 表格区域 */}
            <Card title={`根据筛选条件共查询到 ${count} 条结果：`}>
                {/* pagination 分页参数 */}
                <Table rowKey="id" columns={columns} dataSource={list} pagination={{
                    total: count,
                    pageSize: reqData.per_page,
                    onChange: onPageChange
                }}></Table>
            </Card>
        </div>
    )
}

export default Article